<template>
  <div>
    <el-row type="flex" justify="end" class="button-save">
      <el-button type="primary" @click="save(triageResults)">保存</el-button>
    </el-row>
    <el-form
      ref="resultsForm"
      :class="required == '1' ? 'require' : 'notRequire'"
      :model="triageResults"
      label-position="right"
      label-width="120px"
      size="small"
      :rules="resultsRules"
    >
      <el-form-item label="分诊等级" prop="content">
        <el-select v-model="triageResults.content" placeholder="">
          <el-option label="请选择" value="" />
          <el-option label="I级 急危" value="急危" />
          <el-option label="II级 急重" value="急重" />
          <el-option label="III级 急症" value="急症" />
          <el-option label="IV级 亚急症" value="亚急症" />
          <el-option label="IV级 非急症" value="非急症" />
        </el-select>
      </el-form-item>
      <el-form-item label="分诊依据" prop="index">
        <el-col v-if="triageFlag" :span="22" class="triageResults">
          {{ triageResults.name }}
        </el-col>
        <el-col v-if="!triageFlag" :span="22" class="triageResults">
          <el-row
            v-for="(name, nameIndex) in triageResults.nameList"
            :key="nameIndex"
          >
            {{ name.content }}：{{ name.name.join(',') }}
          </el-row>
        </el-col>
        <el-col :span="2">
          <el-button
            size="small"
            style="margin-left: 20px"
            @click="addTriageResult"
          >
            新增
          </el-button>
        </el-col>
      </el-form-item>
    </el-form>
    <el-dialog
      title="分诊依据"
      :visible.sync="addResultDialog"
      center
      @open="getTimer()"
    >
      <el-tabs type="border-card" class="tabs">
        <el-tab-pane label="急危">
          <check
            :key="timer"
            v-model="saveTriageResults.first"
            :list="triageList.filter((item) => item.content == '急危')"
            style="padding-left: 30px"
          />
        </el-tab-pane>
        <el-tab-pane label="急重">
          <check
            :key="timer"
            v-model="saveTriageResults.second"
            :list="triageList.filter((item) => item.content == '急重')"
            style="padding-left: 30px"
          />
        </el-tab-pane>
        <el-tab-pane label="急症">
          <check
            :key="timer"
            v-model="saveTriageResults.third"
            :list="triageList.filter((item) => item.content == '急症')"
            style="padding-left: 30px"
          />
        </el-tab-pane>
        <el-tab-pane label="亚急">
          <check
            :key="timer"
            v-model="saveTriageResults.fourth"
            :list="triageList.filter((item) => item.content == '亚急')"
            style="padding-left: 30px"
          />
        </el-tab-pane>
        <el-tab-pane label="非急">
          <check
            :key="timer"
            v-model="saveTriageResults.fifth"
            :list="triageList.filter((item) => item.content == '非急')"
            style="padding-left: 30px"
          />
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addResultDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirm"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOnUseClassificationa,
  getAllClassificationInfo,
  saveClassificationInfo
} from '@/api/triage/triage-new'
import Check from '@/components/scoreRow/Check'

export default {
  name: 'TriageResult',
  components: {
    Check
  },
  props: {
    id: {
      type: Object,
      default: () => {}
    },
    require: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      triageResults: {
        content: '',
        index: ''
      },
      saveTriageResults: {
        first: '',
        second: '',
        third: '',
        fourth: '',
        fifth: ''
      },
      resultObj: {
        first: '急危',
        second: '急重',
        third: '急症',
        fourth: '亚急',
        fifth: '非急'
      },
      required: '',
      triageList: [],
      triageFlag: false,
      addResultDialog: false,
      timer: '',
      resultsRules: {
        content: null,
        index: null
      }
    }
  },
  created() {
    this.setRequire()
    this.getOnUseClassificationa()
  },
  methods: {
    setRequire() {
      if (this.require.length > 0) {
        this.required = this.require[0].value
        if (this.required !== '2') {
          Object.keys(this.resultsRules).forEach((el) => {
            this.resultsRules[el] = [
              {
                required: true,
                message: ' ',
                trigger: 'blur'
              }
            ]
          })
        } else {
          Object.keys(this.resultsRules).forEach((el) => {
            this.resultsRules[el] = null
          })
        }
      }
    },
    getOnUseClassificationa() {
      getOnUseClassificationa({
        hospitalId: this.$store.getters.hospitalId
      }).then((res) => {
        if (res.code === 0) {
          let list = []
          list = res.data.filter((item) => item.name === '分诊依据')
          if (list.length > 0) {
            this.triageList = list[0].listb
          }
          this.triageList.forEach((item) => {
            item.fieldType = 'content'
            item.type = '2'
          })
          this.getAllClassificationInfo()
        }
      })
    },
    getAllClassificationInfo() {
      if (this.id.patientId && this.id.dispatchId) {
        getAllClassificationInfo({
          dispatchId: this.id.dispatchId,
          patientId: this.id.patientId
        }).then((res) => {
          if (res.code === 0) {
            if (res.data) {
              this.triageResults = res.data
              this.nameClassification()
            }
          }
        })
      }
    },
    nameClassification() {
      const arr = []
      if (this.triageResults.index) {
        this.triageResults.indexArr = this.triageResults.index.split(',')
      }
      for (const key in this.saveTriageResults) {
        this.saveTriageResults[key] = this.triageResults.index
      }
      if (this.triageFlag) {
        if (this.triageResults.indexArr) {
          this.triageResults.indexArr.forEach((el) => {
            this.triageList.forEach((item) => {
              if (item.index === el) {
                arr.push(item.name)
              }
            })
          })
        }
        this.triageResults.name = arr.join(',')
      } else {
        const list = []
        this.triageResults.indexArr.forEach((el) => {
          this.triageList.forEach((item) => {
            if (item.index === el) {
              if (list.findIndex((find) => find.content === item.content) < 0) {
                list.push({ content: item.content, name: [item.name] })
              } else {
                const num = list.findIndex(
                  (find) => find.content === item.content
                )
                list[num].index.push(item.name)
              }
            }
          })
        })
        this.triageResults.nameList = list
      }
    },
    getTimer() {
      this.timer = new Date().getTime()
    },
    addTriageResult() {
      this.addResultDialog = true
    },
    confirm() {
      const arr = []
      let content = ''
      for (const key in this.saveTriageResults) {
        if (this.saveTriageResults[key]) {
          arr.push(this.saveTriageResults[key])
          if (!content) {
            content = this.resultObj[key]
          }
        }
      }
      const obj = {
        index: arr.join(','),
        content: content,
        userId: this.$store.getters.userId,
        ...this.id
      }
      if (this.triageResults.id) {
        obj.id = this.triageResults.id
      }
      console.log(obj, 'obj')
      this.saveClassificationInfo(obj)
    },
    save(obj) {
      this.$refs.resultsForm.validate((valid) => {
        if (!valid && this.required == '1') {
          this.$message.error('请通过验证')
        } else {
          this.saveClassificationInfo(obj)
        }
      })
    },
    saveClassificationInfo(obj) {
      saveClassificationInfo(obj).then((res) => {
        if (res.code === 0) {
          this.$message.success('保存成功')
          this.getAllClassificationInfo()
          this.addResultDialog = false
        } else {
          this.$message.error('保存失败')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.button-save {
  padding-right: 40px;
  margin-bottom: 20px;
}
.tabs {
  min-height: 400px;
}
.triageResults {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  min-height: 34px;
  padding: 0 15px;
  color: #606266;
}
</style>

<style lang="scss">
.notRequire {
  .el-form-item.is-error .el-input__inner {
    border-color: #dcdfe6;
  }
}
</style>
